* { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;}
body, div, p, span { color: #333; font-style: normal; font-weight: normal; margin: 0; padding: 0; line-height: 1; font-size: 12px; display: block;}
input,textarea,select { -webkit-appearance: none; border-width: 0; outline-style: none; font-size: 12px;}
img { display: block;}
a, a:visited { color: #333; text-decoration: none;}
a:hover {}
::-webkit-input-placeholder { color: #ccc;}
.h50 { height: 50px; clear: both; overflow: hidden;}

.header-001 { background-color: #fff; height: 44px; padding: 0 12px;}
.header-001 .logo { height: 44px; line-height: 44px; background: url(../image/logo.png) no-repeat left; background-size: auto 30px; font-size: 18px; padding-left: 70px;}
.swiper-001 { margin: 10px 15px 0;}
.swiper-001 .image { width: 100%; height: 140px; object-fit: cover; border-radius: 12px;}
.swiper-001 .swiper-pagination-bullet { background-color: #000; opacity: 1;}
.swiper-001 .swiper-pagination-bullet-active { background-color: #fff;}

.swiper-1-001 .image { width: 100%; height: 375px; object-fit: cover;}
.swiper-1-001 .swiper-pagination-bullet { background-color: #000; opacity: 1;}
.swiper-1-001 .swiper-pagination-bullet-active { background-color: #fff;}

.header-1-001 { clear: both; overflow: hidden; position: relative;}
.header-1-001 .nav { height: 44px; position: absolute; left: 0; top: 0; right: 0; display: flex; align-items: center; justify-content: space-between; z-index: 10;}
.header-1-001 .back { width: 60px; height: 44px; display: flex; align-items: center; justify-content: center;}
.header-1-001 .back::before { width: 28px; height: 28px; background-color: rgba(255,255,255,0.5); content: ''; border-radius: 50%;}
.header-1-001 .share { width: 60px; height: 44px; display: flex; align-items: center; justify-content: center;}
.header-1-001 .share::before { width: 28px; height: 28px; background-color: rgba(255,255,255,0.5); content: ''; border-radius: 50%;}

.search-bar-001 { margin: 10px 10px 0; height: 32px; background-color: #f5f5f5; border-radius: 100px; display: flex; align-items: center; padding: 0 12px;}
.search-bar-001 .icon { width: 16px; height: 16px; background-color: #eee; border-radius: 50%;}
.search-bar-001 .input-box { height: 28px; flex: 1; width: 1%; margin-left: 5px; background-color: transparent;}

.category-container-001 { height: calc(100vh - 102px); overflow: hidden; clear: both; display: flex; margin-top: 10px;}
.category-container-001 .aside { width: 100px; background-color: #f2f2f2;}
.category-container-001 .aside .item { height: 44px; line-height: 44px; padding-left: 12px; font-size: 14px;}
.category-container-001 .aside .item.active { position: relative; color: #B77943; background-color: #fff; font-weight: bold;}
.category-container-001 .aside .item.active::before { content: ''; position: absolute; left: 0; top: 50%; width: 3px; height: 20px; margin-top: -10px; background-color: #B77943;}
.category-container-001 .goods-wrapper { flex: 1; width: 1%;}
.category-container-001 .goods-wrapper .tools { display: flex; height: 40px; align-items: center; justify-content: flex-end;}
.category-container-001 .goods-wrapper .tools .li { margin-right: 12px;}
.category-container-001 .goods-wrapper .tools .li.active { color: #B77943; font-weight: bold;}
.category-container-001 .goods-container { height: calc(100vh - 142px); overflow: hidden; overflow-y: auto; transform: translate3d(0,0,0); -webkit-overflow-scrolling: touch;}
.category-container-001 .goods-list { display: flex; flex-wrap: wrap; justify-content: space-between; padding: 0 10px 10px;}
.category-container-001 .goods-list .item { width: calc(50% - 5px); background-color: #fff; box-shadow: 0 1px 5px rgba(0,0,0,0.1); border-radius: 3px; margin-top: 10px; overflow: hidden;}
.category-container-001 .goods-list .item:nth-child(1), .category-container-001 .goods-list .item:nth-child(2) { margin-top: 4px;}
.category-container-001 .goods-list .image { width: 100%; height: 120px; background-color: #eee;}
.category-container-001 .goods-list .name { padding: 6px 8px; font-weight: bold; line-height: 1.4;}
.category-container-001 .goods-list .other { padding: 0 8px; display: flex; align-items: center; justify-content: space-between; padding-bottom: 10px;}
.category-container-001 .goods-list .price { color: red; font-weight: bold; font-size: 15px;}
.category-container-001 .goods-list .price::before { content: '￥'; font-size: 12px;}
.category-container-001 .goods-list .btn { width: 20px; height: 20px; background-color: #eee; border-radius: 50%;}

.container-001 { min-height: 100vh; background-color: #f2f2f2; clear: both;}
.goods-detail-001 { background-color: #fff; border-radius: 10px; padding: 15px 12px 0; margin: 12px;}
.goods-detail-001 .price { font-size: 24px; font-weight: bold;}
.goods-detail-001 .price::before { content: '￥'; font-size: 18px;}
.goods-detail-001 .bar { display: flex; align-items: center; justify-content: space-between; padding-top: 12px;}
.goods-detail-001 .title { font-weight: bold; font-size: 15px; line-height: 1.4; flex: 1; width: 1%; margin-right: 8px;}
.goods-detail-001 .collection { display: flex; flex-direction: column; align-items: center; justify-content: center;}
.goods-detail-001 .collection::before { width: 20px; height: 20px; background-color: #eee; border-radius: 50%; content: ''; margin-bottom: 5px;}
.goods-detail-001 .desc { color: #999; padding: 10px 0 14px;}
.goods-detail-001 .other { height: 40px; display: flex; align-items: center; justify-content: space-between; border-top: solid 1px #eee; padding: 0 10px;}
.goods-detail-001 .express { color: #999;}
.goods-detail-001 .sale { color: #999;}

.fixed-btn-panel-001 { position: fixed; left: 0; right: 0; bottom: 0; height: 44px; z-index: 10; display: flex; align-items: center; background-color: #fff; padding: 0 12px;}
.fixed-btn-panel-001 .icon { display: flex; flex-direction: column; align-items: center; justify-content: center; margin-right: 18px;}
.fixed-btn-panel-001 .icon::before { width: 20px; height: 20px; background-color: #eee; border-radius: 50%; content: ''; margin-bottom: 4px;}
.fixed-btn-panel-001 .btn { background-color: #333; color: #fff; height: 32px; flex: 1; width: 1%; margin: 0 15px 0 0; border-radius: 100px; display: flex; align-items: center; justify-content: center;}
.fixed-btn-panel-001 .buy { width: 50px; height: 50px; text-align: center; line-height: 50px; background-color: red; color: #fff; position: relative; border-radius: 50%; font-size: 20px; margin-bottom: 20px;}

.menu-001 { display: flex; flex-wrap: wrap;}
.menu-001 .item { width: 20%; display: flex; flex-direction: column; align-items: center; justify-content: center; margin-top: 15px;}
.menu-001 .item::before { width: 30px; height: 30px; background-repeat: no-repeat; background-size: 30px; content: ''; margin-bottom: 4px;}
.menu-001 .item:nth-child(1)::before { background-image: url(../image/icon1.png);}
.menu-001 .item:nth-child(2)::before { background-image: url(../image/icon2.png);}
.menu-001 .item:nth-child(3)::before { background-image: url(../image/icon3.png);}
.menu-001 .item:nth-child(4)::before { background-image: url(../image/icon4.png);}
.menu-001 .item:nth-child(5)::before { background-image: url(../image/icon5.png);}
.menu-001 .item:nth-child(6)::before { background-image: url(../image/icon6.png);}
.menu-001 .item:nth-child(7)::before { background-image: url(../image/icon7.png);}
.menu-001 .item:nth-child(8)::before { background-image: url(../image/icon8.png);}
.menu-001 .item:nth-child(9)::before { background-image: url(../image/icon9.png);}
.menu-001 .item:nth-child(10)::before { background-image: url(../image/icon10.png);}

.notice-001 { height: 40px; display: flex; align-items: center; margin: 0 15px; margin-top: 5px; overflow: hidden; clear: both;}
.notice-001 .label { font-size: 14px;}
.notice-001 .notice-list { flex: 1; width: 1%; height: 40px;}
.notice-001 .swiper-slide { line-height: 40px; font-size: 14px;}

.goods-list-001 { clear: both; overflow: hidden; display: flex; flex-wrap: wrap; justify-content: space-between; padding: 10px 15px 15px;}
.goods-list-001 .item { width: calc(50% - 5px); margin-top: 20px;}
.goods-list-001 .image { width: 100%; height: 160px; background-color: #eee;}
.goods-list-001 .name { line-height: 1.4; margin-top: 10px;}
.goods-list-001 .price { color: #fd3028; font-size: 16px; font-weight: bold; margin-top: 8px;}
.goods-list-001 .price::before { font-size: 14px; content: '￥';}
.goods-list-001 .other { display: flex; align-items: center; justify-content: space-between; margin-top: 10px;}
.goods-list-001 .sall { color: #999;}
.goods-list-001 .btn { width: 34px; height: 22px; text-align: center; line-height: 22px; background-color: #ff5555; color: #fff; border-radius: 4px;}

.love-list-001 { clear: both; overflow: hidden; padding: 15px;}
.love-list-001 .title { display: flex; align-items: center; font-size: 16px; margin-bottom: 20px;}
.love-list-001 .title::before, .love-list-001 .title::after { flex: 1; width: 1%; height: 5px; background-color: #b77943; content: '';}
.love-list-001 .title::before { margin-right: 20px;}
.love-list-001 .title::after { margin-left: 20px;}
.love-list-001 .item { display: flex; padding: 5px 0;}
.love-list-001 .image { width: 126px; height: 126px; object-fit: cover; background-color: #eee;}
.love-list-001 .info { flex: 1; width: 1%; margin-left: 12px;}
.love-list-001 .name { font-size: 14px; line-height: 1.4; margin-top: -2px;}
.love-list-001 .desc { color: #999; margin-top: 8px;}
.love-list-001 .price { color: #fd3028; font-size: 16px; font-weight: bold; margin-top: 12px;}
.love-list-001 .price::before { font-size: 14px; content: '￥';}
.love-list-001 .other { display: flex; align-items: center; justify-content: space-between; margin-top: 10px;}
.love-list-001 .sall { color: #999;}
.love-list-001 .btn { width: 40px; height: 28px; text-align: center; line-height: 28px; background-color: #ff5555; color: #fff; border-radius: 4px;}

.brand-list-001 { overflow: hidden; padding: 0 15px 20px;}
.brand-list-001 .box { width: calc(50% - 35px); border-radius: 8px; background-color: #f6f1e7; padding: 18px 15px; float: left; margin: 10px 10px 0 0;}
.brand-list-001 .box .label { font-size: 16px}
.brand-list-001 .box .desc { margin-top: 10px; color: #999;}
.brand-list-001 .box .image { background: url(../image/logo.png) no-repeat bottom center; background-size: auto 100%; height: 55px; margin-top: 53px;}
.brand-list-001 .item { float: left; width: calc(50% - 35px); height: 58px; border-radius: 8px; padding: 0 15px; margin-top: 10px; display: flex; align-items: center;}
.brand-list-001 .icon { width: 32px; height: 37px; background-repeat: no-repeat; background-size: auto 100%;}
.brand-list-001 .icon1 { background-image: url(../image/kctx.png);}
.brand-list-001 .icon2 { background-image: url(../image/yqdj.png);}
.brand-list-001 .icon3 { background-image: url(../image/ryyq.png);}
.brand-list-001 .info { margin-left: 16px; flex: 1; width: 1%;}
.brand-list-001 .item .label { font-size: 15px;}
.brand-list-001 .item .desc { margin-top: 5px; color: #999;}
.brand-list-001 .item:nth-child(2) { background-color: #e9f3ff;}
.brand-list-001 .item:nth-child(3) { background-color: #f6f1e7;}
.brand-list-001 .item:nth-child(4) { background-color: #f2e2e4;}

.footer-001 { height: 50px; background-color: #f5f5f5; display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 100;}
.footer-001 .item { width: 25%; display: flex; flex-direction: column; align-items: center; justify-content: center;}
.footer-001 .item::before { content: ''; background-repeat: no-repeat; background-size: 24px; width: 24px; height: 24px; margin-bottom: 2px;}
.footer-001 .item:nth-child(1)::before { background-image: url(../image/home-on.png);}
.footer-001 .item:nth-child(2)::before { background-image: url(../image/icon-about.png);}
.footer-001 .item:nth-child(3)::before { background-image: url(../image/icon-news.png);}
.footer-001 .item:nth-child(4)::before { background-image: url(../image/icon-my.png);}

.my-001 { background-color: #333; clear: both; overflow: hidden;}
.my-001 .my-content { background-color: #B77943; margin: 15px 15px 0; border-radius: 10px 10px 0 0;}
.my-001 .tool { display: flex; align-items: center; justify-content: flex-end; padding: 15px;}
.my-001 .tool .icon { width: 20px; height: 20px; border: solid 1px #fff; border-radius: 50%; margin-left: 20px;}
.my-001 .user { display: flex; align-items: center; padding: 0 15px 20px;}
.my-001 .user .avatar { width: 60px; height: 60px; background-color: #fff; border-radius: 50%;}
.my-001 .user .info { flex: 1; width: 1%; margin-left: 12px;}
.my-001 .user .nick { font-weight: bold; font-size: 16px; color: #fff;}
.my-001 .user .auth { background-color: #333; height: 20px; display: flex; align-items: center; margin-top: 12px; border-radius: 100px; width: 60px; color: #fff; justify-content: center;}
.my-001 .tools { display: flex; padding-bottom: 20px;}
.my-001 .tools .item { width: calc(100% / 3); display: flex; flex-direction: column; align-items: center; justify-content: center;}
.my-001 .tools .value { font-size: 20px; font-weight: bold; color: #623d1e;}
.my-001 .tools .label { color: #623d1e; margin-top: 5px;}

.my-section-001 { clear: both; overflow: hidden; padding: 5px 0 25px;}
.my-section-001 .title-bar { display: flex; align-items: center; justify-content: space-between; padding: 0 12px; height: 40px;}
.my-section-001 .title-bar .name { font-weight: bold; font-size: 15px;}
.my-section-001 .title-bar .more { color: #999;}
.my-section-001 .menu { display: flex; padding-top: 12px;}
.my-section-001 .menu .item { width: 20%; display: flex; flex-direction: column; align-items: center; justify-content: center;}
.my-section-001 .menu .item::before { width: 30px; height: 30px; background-color: #eee; content: ''; margin-bottom: 8px;}

.my-menu-001 { clear: both; overflow: hidden; border-top: solid 10px #f2f2f2;}
.my-menu-001 .item { height: 48px; display: flex; align-items: center; justify-content: space-between; padding: 0 12px; border-bottom: solid 1px #eee;}
.my-menu-001 .icon { width: 20px; height: 20px; background-color: #eee;}
.my-menu-001 .name { margin-left: 10px; font-size: 14px; color: #999;}
.my-menu-001 .arrow { width: 6px; height: 6px; margin-left: auto; margin-right: 5px; border-style: solid; border-width: 1px 1px 0 0; border-color: #aaa; transform: rotate(45deg);}

.cart-empty-001 { height: calc(100vh - 50px); display: flex; flex-direction: column; align-items: center; justify-content: center; background-color: #f2f2f2;}
.cart-empty-001 .icon { width: 100px; height: 100px; background-color: #eee;}
.cart-empty-001 .name { color: #666; margin-top: 20px; font-size: 14px;}
.cart-empty-001 .desc { color: #666; margin-top: 10px; font-size: 14px;}
.cart-empty-001 .btn { border: solid 1px #B77943; color: #fff; font-size: 14px; width: 120px; border-radius: 100px; display: flex; align-items: center; justify-content: center; height: 36px; color: #B77943; margin-top: 20px;}

.order-tab-bar-001 { height: 44px; display: flex; background-color: #fff;}
.order-tab-bar-001 .item { width: 20%; text-align: center; line-height: 44px; font-size: 14px; color: #999;}
.order-tab-bar-001 .item.active { color: #000; font-weight: bold; position: relative;}
.order-tab-bar-001 .item.active::after { width: 20px; height: 3px; background-color: red; content: ''; position: absolute; left: 50%; margin-left: -10px; bottom: 0;}

.order-list-001 { background-color: #f5f5f5; height: calc(100vh - 86px); overflow: hidden; overflow-y: auto; transform: translate3d(0,0,0); -webkit-overflow-scrolling: touch;}
.order-list-001 .empty { height: 100%; display: flex; flex-direction: column; align-items: center;}
.order-list-001 .empty .icon { width: 100px; height: 100px; background-color: #eee; margin-top: 80px;}
.order-list-001 .empty .text { font-size: 14px; margin-top: 20px; color: #666;}













